<!--
 * @Author: zls 3292844045@qq.com
 * @Date: 2022-05-25 16:13:21
 * @LastEditors: zls 3292844045@qq.com
 * @LastEditTime: 2022-05-27 00:54:29
 * @FilePath: \CUCCL\html\female_cloths.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>女士服饰-奢侈品衣服-时尚女装-价格-古驰GUCCI中国官方网站</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_3418519_67alwcgubot.css"
    />
    <link rel="stylesheet" href="../css/init_css/reset.css" />
    <link rel="stylesheet" href="../css/main_css/main.css" />
    <link rel="stylesheet" href="../css/female_cloths/female_cloths.css" />
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <!-- 头部部分 -->
    <header class="splice-header">
      <div class="splice-container header-transparent">
        <nav class="splice-navbar">
          <!-- logo部分 -->
          <div class="splice-navbar-top">
            <!-- 三部分, 左侧 中间 右侧 -->
            <div class="splice-navbar-left">
              <ul>
                <li>
                  <a href="">
                    <i
                      class="iconfont icon-wxbdingwei"
                      style="opacity: 0.5"
                    ></i>
                    <span>配送至：</span>
                    <span>中国大陆地区</span>
                  </a>
                  <!-- 鼠标滑过显示下方隐藏的div -->
                  <!-- <div class="splice-sub-menu splic-sub-menu-hidden">
                        <h6>网上商城</h6>
                        <p>请注意，在浏览过程中更改您的位置将会清除购物袋中的所有商品。</p>
                    </div> -->
                </li>
                <li>
                  <a href="">
                    <span>客户服务</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <i class="iconfont icon-dianhua"></i>
                    <span>400.8210.582</span>
                  </a>
                </li>
              </ul>
            </div>

            <div class="splice-navbar-right">
              <a class="login" href="../html/login.html">登录</a>
              <!-- //心愿单 -->
              <a href="" class="splice-nav-savedItems">
                <i class="iconfont icon-icon"></i>
              </a>
              <!-- 购物车 -->
              <a href="" class="shopping-cart">
                <i class="iconfont icon-gouwudai"></i>
                <span>购物车</span>
              </a>

              <!-- //搜索框 -->
              <span class="header-search_">
                <input type="text" class="search_msg" />
                <span class="search_button">
                  <i class="iconfont icon-sousuo"></i>
                </span>
              </span>
            </div>
            <div class="splice-navbar-logo">
              <a href="https://www.gucci.cn/zh/">
                <img
                  src="https://res.gucci.cn/images/common/gucci-logo@2x.png"
                  alt="GUCCI"
                />
              </a>
            </div>
          </div>
          <!-- logo下面菜单 -->
          <div class="splice-navbar-menu">
            <ul class="splice-nav">
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">全球资讯</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">手袋</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="./female.html">
                  <span class="navtitletxt">女士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">男士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">童装</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">礼品</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">珠宝和腕表</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">美妆</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">生活和艺术</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
    <!-- 主体部分 -->
    <section>
      <!-- 上面的大图片 -->
      <div class="top_big_img">
        <div class="big_img">
          <img
            src="https://res.gucci.cn/resources/2022/3/15/1647306076171991_content_HeroRegularStandard_1600x675_1647264671_HeroRegularStandard_Gucci-LOVE-PARADE-2022-013_001_Default.jpg"
            alt=""
          />
        </div>
        <div class="big_img_content">
          <h4>女士</h4>
          <h2>服饰</h2>
        </div>
      </div>

      <!-- 筛选部分 -->
      <div class="sort_search">
        <div class="sort_search_left">
          <ul>
            <li>
              <span>女士</span>
            </li>
            <li class="dot">
              <span>.</span>
            </li>
            <li>
              <span>女士服饰</span>
            </li>
          </ul>
        </div>
        <div class="sort_search_right">
          <div class="sort">
            <a class="drop_down">
              排序
              <span>:</span>
              <span class="asc">价格由低到高</span>

              <span class="desc">价格由高到低</span>
              <!-- <i class="iconfont icon-xiangxiafanye"></i> -->
            </a>
          </div>
          <div class="search">
            <a>
              <span>筛选</span>
              <i class="iconfont icon-xiangxiafanye"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- 渲染商品列表 -->
      <div class="goods_list">
        <ul class="goods_list_ul">
          <!-- <li>
            <div>
              <i class="iconfont icon-aixin"></i>
            </div>
            <img
              src="https://res.gucci.cn/resources/2022/3/24/1648093322960354_ts_470X470.png"
              alt=""
            />
            <h4>花卉印花平纹细布连衣裙</h4>
            <p>￥28000</p>
            <a href=""
              >立即购买
              <i class="iconfont icon-youjiantou"></i>
            </a>
          </li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li> -->
        </ul>
        <span class="pages" index="1"></span>
      </div>
    </section>

    <!-- 尾部 -->
    <footer class="splice_footer">
      <!-- 尾部主体 -->
      <div class="splice_container">
        <!-- 返回顶部 -->
        <!-- <div class="splice_back_top">
          <i class="iconfont icon-xiangshangjiantou"></i>
        </div> -->
        <!-- 尾部内容 -->
        <div class="splice_footer_content">
          <!-- 左边 -->
          <div class="splice_footer_left">
            <ul>
              <!-- 免费服务 -->
              <li class="spice_exclusive_service">
                <div class="spice_footer_title">
                  <span>专属服务</span>
                </div>
                <ul class="spice_all">
                  <li><span>免费标准配送</span></li>
                  <li><span>免费礼品包装</span></li>
                  <li><span>预约门店服务</span></li>
                </ul>
              </li>
              <!-- 购买帮助 -->
              <li class="spice_shoping_help">
                <div class="spice_footer_title">
                  <span>购物帮忙</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>支付相关</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>配送</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>退换货</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>发票</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>保养与维修</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 关于公司 -->
              <li class="spice_about_company">
                <div class="spice_footer_title">
                  <span>关于公司</span>
                </div>

                <ul>
                  <li>
                    <a href="">
                      <span>关于GUCCI</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>GUCCI EQUILIBRIUM</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>道德规范</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>职业发展</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>细则及条款</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>隐私与COOKIE</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>企业信息</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 联系方式 -->
              <li class="spice_follow_gucci">
                <div class="spice_footer_title">
                  <span>关注GUCCI</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>微信</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>微博</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>抖音</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>腾讯视频</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>小红书</span>
                    </a>
                  </li>

                  <li class="slice_footer_tails">
                    <a href="">
                      <span>在线顾问</span>
                    </a>
                  </li>
                  <li class="slice_footer_tails">
                    <a href="">
                      <span>400.8210.582</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 需要帮助 -->
              <li class="spice_need_help">
                <div class="spice_footer_title">
                  <span>需要帮助?</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>联系我们</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>常见问题</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- 右边 -->
          <div class="splice_footer_right">
            <div class="splice_footer_right_content">
              <div class="spice_form_group">
                <div class="spice_form_title">订阅GUCCI电子资讯</div>
                <div class="spice_form_content">
                  <p class="spice_form_info">
                    通过订阅，即代表您接受GUCCI的
                    <a href=""> 隐私政策条款 </a>
                  </p>
                  <div class="spice_form_input">
                    <input
                      type="text"
                      name=""
                      id=""
                      placeholder="电子邮件地址"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <script src="../js/api.js"></script>
    <script>
      // 获取标签对象
      // 标题部分
      const $splice_nav = $(".splice-container");
      $splice_nav.on("mouseover", () => {
        $splice_nav.addClass("_bgactive");
      });

      $splice_nav.on("mouseout", () => {
        $splice_nav.removeClass("_bgactive");
      });
      // 鼠标滚动收起
      $(window).scroll(() => {
        // console.log();
        if ($(document).scrollTop() >= 20) {
          // console.log(1);
          $(".splice-container").removeClass("header-transparent");
          $(".splice-container").addClass("_compressed ");
        } else {
          $(".splice-container").removeClass("_compressed ");
          $(".splice-container").addClass("header-transparent");
        }
      });

      // 渲染服饰列表
      // 搜索框模糊查询,默认为空
      let search_msg = "";

      async function goods_add(num, page) {
        let res = await females_cloths_sort({
          search_msg: "",
          page: page,
          num: num,
          // 默认的排序规则
          key: "cloths_id",
          sort: "asc",
        });
        // console.log(res);

        // 渲染数据
        let html = goods_des(res["list"]);
        // console.log(html);
        $(".goods_list_ul").html(html);
        html = "";

        // 生成目录
        let page_num = Math.ceil(res["length"] / num);
        let span_btn = add_pages(page_num, $(".pages"));

        $(".pages").html(span_btn);
        $(".pages")
          .find("button")
          .eq(page_num - 1)
          .addClass("tip");

        console.log(span_btn);

        //点击换页
        console.log($(".pages"));
        $(".pages button").each((i, v) => {
          $(v).on("click", async () => {
            console.log(4 - i);
            let res = await females_cloths_sort({
              search_msg: "",
              num: num,
              page: $(".pages button").length - i,
              key: "cloths_id",
              sort: "asc",
            });
            $(".pages button").each((i, v) => {
              console.log(v);
              $(v).removeClass("tip");
            });
            $(v).addClass("tip");
            console.log(res);
            let html = goods_des(res["list"]);
            $(".goods_list_ul").html(html);
            $(".pages").attr("index", $(".pages button").length - i);
            html = "";
          });
        });

        // 模糊搜索

        $(".search_button").on("click", async () => {
          console.log(1);
          search_msg = $(".search_msg").val();
          console.log(search_msg);
          let res = await females_cloths_sort({
            search_msg: search_msg,
            page: page,
            num: num,
            // 默认的排序规则S
            key: "cloths_id",
            sort: "asc",
          });
          console.log(res);
          html = goods_des(res["list"]);
          // console.log(html);
          $(".goods_list_ul").html(html);
          html = "";

          // 生成目录
          $(".search_msg").attr("sel", search_msg); //添加目录栏
          let page_num = Math.ceil(res["length"] / num);
          // console.log()
          console.log(page_num);
          let span_btn = add_pages(page_num, $(".pages"));
          $(".pages").html(span_btn);
          $(".pages")
            .find("button")
            .eq(page_num - 1)
            .addClass("tip");

          
          $(".pages button").each((i, v) => {
            $(v).on("click", async () => {
              console.log($(".pages button").length - i);
              let res = await females_cloths_sort({
                search_msg: search_msg,
                num: num,
                page: $(".pages button").length - i,
                key: "cloths_id",
                sort: "asc",
              });
              $(".pages button").each((i, v) => {
                console.log(v);
                $(v).removeClass("tip");
              });
              $(v).addClass("tip");
              
              html = goods_des(res["list"]);
              
              $(".goods_list_ul").html(html);
              $(".pages").attr("index", $(".pages button").length - i);
              html = "";
            });
          });
        });

        // 排序
        $('.asc').on('click',async function () {
          let text = $(".search_msg").attr("sel");
          console.log(text);

          if (text) {
            search_msg = text;
          } else {
            search_msg = "";
          }
          let index;
          $(".pages button").each((i, v) => {
            if (v.classList.contains("tip")) {
              index = v.innerHTML;
            }
          });
          console.log(index);
          let res = await females_cloths_sort({
            search_msg: search_msg,
            num: num,
            page: index,
            key: "cloths_prices",
            sort: "asc",
          });
          console.log(res);
          html = goods_des(res["list"]);
          $(".goods_list_ul").html(html);
          html = "";
        });


        $('.desc').on('click',async function () {
          let text = $(".search_msg").attr("sel");
          console.log(text);

          if (text) {
            search_msg = text;
          } else {
            search_msg = "";
          }
          let index;
          $(".pages button").each((i, v) => {
            if (v.classList.contains("tip")) {
              index = v.innerHTML;
            }
          });
          console.log(index);
          let res = await females_cloths_sort({
            search_msg: search_msg,
            num: num,
            page: index,
            key: "cloths_prices",
            sort: "desc",
          });
          console.log(res);
          html = goods_des(res["list"]);
          $(".goods_list_ul").html(html);
          html = "";
        });

        // 渲染数据
      }
      goods_add(6, 1);

      let login_user = localStorage.getItem("LOGIN_NAME");
      if (login_user) {
        $(".login").html("我的账户");
        // $('.login').attr('href',  "../html/login.html");
      } else {
        $(".login").attr("href", "../html/login.html");
      }
    </script>
  </body>
</html>
